<template>
    <view>
        <view class="content" @touchstart="hideDrawer">
            <scroll-view class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation"
                         :scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory"
                         upper-threshold="50">
                <!-- 加载历史数据waitingUI -->
                <view class="loading" v-if="ispage">
                    <view class="spinner">
                        <view class="rect1"></view>
                        <view class="rect2"></view>
                        <view class="rect3"></view>
                        <view class="rect4"></view>
                        <view class="rect5"></view>
                    </view>
                </view>


                <view class="row" v-for="(row,index) in msgList" :key="index" :id="'msg'+row.msg.id">
                    <!-- 系统消息 -->
                    <block v-if="row.type=='system'">
                        <view class="system">
                            <!-- 文字消息 -->
                            <view v-if="row.msg.type=='text'" class="text">
                                {{row.msg.content.text}}
                            </view>
                            <!-- 领取红包消息 -->
                            <view v-if="row.msg.type=='redEnvelope'" class="red-envelope">
                                <image src="https://static.shopsuite.cn/xcxfile/appicon/im/img/red-envelope-chat.png"></image>
                                {{row.msg.content.text}}
                            </view>
                        </view>
                    </block>
                    <!-- 用户消息 -->
                    <block v-if="row.type=='user'">
                        <!-- 自己发出的消息 -->
                        <view class="my" v-if="row.msg.userinfo.uid==myuid">
                            <!-- 左-消息 -->
                            <view class="left">
                                <!-- 文字消息 -->
                                <view v-if="row.msg.type=='text'" class="bubble">
									<u-parse :content="row.msg.content.text + ''" @navigate="navigate"  :imageProp="{lazyLoad:true}"></u-parse>
                                </view>
                                <!-- 语言消息 -->
                                <view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)"
                                      :class="playMsgid == row.msg.id?'play':''">
                                    <view class="length">{{row.msg.content.length}}</view>
                                    <view class="icon my-voice"></view>
                                </view>
                                <!-- 图片消息 -->
                                <view v-if="row.msg.type=='img'" class="bubble img" @tap="showPic(row.msg)">
                                    <image :src="row.msg.content.url"
                                           :style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}"></image>
                                </view>
                                <!-- 红包 -->
                                <view v-if="row.msg.type=='redEnvelope'" class="bubble red-envelope"
                                      @tap="openRedEnvelope(row.msg,index)">
                                    <image src="https://static.shopsuite.cn/xcxfile/appicon/im/img/red-envelope.png"></image>
                                    <view class="tis">
                                        <!-- 点击开红包 -->
                                    </view>
                                    <view class="blessing">
                                        {{row.msg.content.blessing}}
                                    </view>
                                </view>

								<!-- 商品 -->
								<view v-if="row.msg.type=='item'" class="bubble red-envelope" style="width: 100%;max-width: 100%;">

										<navigator  :url="'/pagesub/product/detail' + '?pid=' + (row.msg.content.item_id)" class="m-product-item">
											<view class="m-product-img product-list">
												<image lazy-load :src="row.msg.content.product_image"/>
											</view>
											<view class="m-product-info1" style="display:flex; flex-flow: column;justify-content: space-between;">
												<view class="m-product-name2">
													<label style="color: #606060;">{{row.msg.content.product_item_name}}</label>
												</view>
												<view class="m-product-price1">
													<view class="money">
														<block>
															<label>{{__('￥')}}</label><label style="">{{number_format(row.msg.content.item_unit_price, 2)}}</label>
														</block>
													</view>
												</view>
											</view>
										</navigator>
								</view>

                            </view>
                            <!-- 右-头像 -->
                            <view class="right">
                                <image :src="row.msg.userinfo.face"></image>
                            </view>
                        </view>
                        <!-- 别人发出的消息 -->
                        <view class="other" v-if="row.msg.userinfo.uid!=myuid">
                            <!-- 左-头像 -->
                            <view class="left">
                                <image :src="row.msg.userinfo.face"></image>
                            </view>
                            <!-- 右-用户名称-时间-消息 -->
                            <view class="right">
                                <view class="username">
                                    <view class="name">{{row.msg.userinfo.username}}</view>
                                    <view class="time">{{row.msg.time}}</view>
                                </view>
                                <!-- 文字消息 -->
                                <view v-if="row.msg.type=='text'" class="bubble">
									<u-parse :content="row.msg.content.text + ''" @navigate="navigate"  :imageProp="{lazyLoad:true}"></u-parse>
                                </view>
                                <!-- 语音消息 -->
                                <view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)"
                                      :class="playMsgid == row.msg.id?'play':''">
                                    <view class="icon other-voice"></view>
                                    <view class="length">{{row.msg.content.length}}</view>
                                </view>
                                <!-- 图片消息 -->
                                <view v-if="row.msg.type=='img'" class="bubble img" @tap="showPic(row.msg)">
                                    <image :src="row.msg.content.url"
                                           :style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}"></image>
                                </view>
                                <!-- 红包 -->
                                <view v-if="row.msg.type=='redEnvelope'" class="bubble red-envelope"
                                      @tap="openRedEnvelope(row.msg,index)">
                                    <image src="https://static.shopsuite.cn/xcxfile/appicon/im/img/red-envelope.png"></image>
                                    <view class="tis">
                                        <!-- 点击开红包 -->
                                    </view>
                                    <view class="blessing">
                                        {{row.msg.content.blessing}}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </block>
                </view>
            </scroll-view>
        </view>
        <!-- 抽屉栏 -->
        <view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
            <!-- 表情 -->
            <!-- <swiper class="emoji-swiper"
            @animationfinish="moveend($event)"
            :class="{hidden:hideEmoji}"
            indicator-dots="true"
            duration="150"
            :current="dotsCurrent"
            >
                <swiper-item v-for="(page,pid) in emojiList" :key="pid">
                    <view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
                        <image mode="widthFix" :src="'https://static.shopsuite.cn/xcxfile/appicon/im/img/emoji/'+em.url"></image>
                    </view>
                </swiper-item>
            </swiper> -->
            <emotion @addEmoji="addEmoji" :class="{hidden:hideEmoji}"></emotion>
            <!-- 更多功能 相册-拍照-红包 -->
            <view class="more-layer" :class="{hidden:hideMore}">
                <view class="list">
                    <view class="box" @tap="chooseImage">
                        <view class="icon tupian2"></view>
                    </view>
                    <view class="box" @tap="camera">
                        <view class="icon paizhao"></view>
                    </view>

                    <view class="box" @tap="handRedEnvelopes" v-if="false">
                        <view class="icon hongbao"></view>
                    </view>

                    <!-- #ifdef MP-WEIXIN || APP-PLUS -->
                    <view class="box" @tap="yuyintonghua">
                        <image style="font-size:16px;width: 32px; height: 32px;"
                               src="https://static.shopsuite.cn/xcxfile/appicon/im/img/more/yuyintonghua.png"></image>
                    </view>
                    <!-- #endif -->

                    <view class="box" @tap="weizhi" v-if="false">
                        <image style="font-size:16px;width: 32px; height: 32px;"
                               src="https://static.shopsuite.cn/xcxfile/appicon/im/img/more/weizhi.png"></image>
                    </view>
                    <!-- <view class="box" @tap="handRedEnvelopes">
                        <image style="font-size:16px;width: 32px; height: 32px;"
                        src="https://static.shopsuite.cn/xcxfile/appicon/im/img/more/红包.png"></image>
                    </view> -->

                    <view class="box" @tap="yuyinshuru" v-if="false">
                        <image style="font-size:16px;width: 32px; height: 32px;"
                               src="https://static.shopsuite.cn/xcxfile/appicon/im/img/more/yuyinshuru.png"></image>
                    </view>

                    <view class="box" @tap="meShouchang" v-if="false">
                        <image style="font-size:16px;width: 32px; height: 32px;"
                               src="https://static.shopsuite.cn/xcxfile/appicon/im/img/more/me-shouchang.png"></image>
                    </view>

                    <view class="box" @tap="userinfo" v-if="false">
                        <image style="font-size:16px;width: 32px; height: 32px;"
                               src="https://static.shopsuite.cn/xcxfile/appicon/im/img/more/userinfo.png"></image>
                    </view>


                    <!-- <view class="box" @tap="handRedEnvelopes">
                        <image style="font-size:16px;width: 32px; height: 28px;" src="https://static.shopsuite.cn/xcxfile/appicon/im/img/more/文件.png"></image>
                    </view> -->
                </view>
            </view>
        </view>
        <!-- 底部输入栏 -->
        <view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard">
            <!-- H5下不能录音，输入栏布局改动一下 -->
            <!-- #ifndef H5 -->
            <view class="voice">
                <view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
            </view>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <view class="more" @tap="showMore">
                <view class="icon add"></view>
            </view>
            <!-- #endif -->
            <view class="textbox">
                <view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']"
                      @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
                      @touchcancel="voiceCancel">{{voiceTis}}
                </view>
                <view class="text-mode" :class="isVoice?'hidden':''">
                    <view class="box">
                        <textarea auto-height="true"  v-model="textMsg" @focus="textareaFocus" cursor-spacing="20" />
                    </view>
                    <view class="em" @tap="chooseEmoji">
                        <view class="icon biaoqing"></view>
                    </view>
                </view>
            </view>
            <!-- #ifndef H5 -->
            <view class="more" @tap="showMore">
                <view class="icon add"></view>
            </view>
            <!-- #endif -->
            <view class="send" :class="isVoice?'hidden':''" @tap="sendText">
                <view class="btn">{{__('发送')}}</view>
            </view>
        </view>
        <!-- 录音UI效果 -->
        <view class="record" :class="recording?'':'hidden'">
            <view class="ing" :class="willStop?'hidden':''">
                <view class="icon luyin2"></view>
            </view>
            <view class="cancel" :class="willStop?'':'hidden'">
                <view class="icon chehui"></view>
            </view>
            <view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
        </view>
        <!-- 红包弹窗 -->
        <view class="windows" :class="windowsState">
            <!-- 遮罩层 -->
            <view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view>
            <view class="layer" @touchmove.stop.prevent="discard">
                <view class="open-redenvelope">
                    <view class="top">
                        <view class="close-btn">
                            <view class="icon close" @tap="closeRedEnvelope"></view>
                        </view>
                        <image src="https://static.shopsuite.cn/xcxfile/appicon/im/img/im/face/face_1.jpg"></image>
                    </view>
                    <view class="from">来自{{redenvelopeData.from}}</view>
                    <view class="blessing">{{redenvelopeData.blessing}}</view>
                    <view class="money">{{redenvelopeData.money}}</view>
                    <view class="showDetails" @tap="toDetails(redenvelopeData.rid)">
                        查看领取详情
                        <view class="icon to"></view>
                    </view>
                </view>
            </view>

        </view>
    </view>
</template>
<script>

    import emojiData from "@/static/emoji/emojiData.js"
    import emotion from './emotion/index.vue'
	import uParse from '@/components/u-parse/u-parse.vue'

    import { mapState, mapMutations } from 'vuex';
    import $ from "../../helpers/util";
    import Config from "../../config/config";
    import apirequest from "../../helpers/apiconfig";

    export default {
        components: {
            emotion,
			uParse
        },
        data()
        {
            return {
				options:{},
                //文字消息
                // dotsCurrent:1,
                textMsg: '',
                //消息列表
                isHistoryLoading: false,
                scrollAnimation: false,
                scrollTop: 0,
                scrollToView: '',
                msgList: [],//信息列表
                msgImgList: [],
                myuid: 0,

                //录音相关参数
                // #ifndef H5
                //H5不能录音
                RECORDER: uni.getRecorderManager(),
                // #endif
                isVoice: false,
                voiceTis: '按住 说话',
                recordTis: "手指上滑 取消发送",
                recording: false,
                willStop: false,
                initPoint: {identifier: 0, Y: 0},
                recordTimer: null,
                recordLength: 0,

                //播放语音相关参数
                AUDIO: uni.createInnerAudioContext(),
                playMsgid: null,
                VoiceTimer: null,
                // 抽屉参数
                popupLayerClass: '',
                // more参数
                hideMore: true,
                //表情定义
                hideEmoji: true,
                emojiList: [{}],
                emojiPath: '',
                //表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
                // onlineEmoji:{
                // "100.gif":"AbNQgA.gif","101.gif":"AbN3ut.gif","102.gif":"AbNM3d.gif","103.gif":"AbN8DP.gif",
                // "104.gif":"AbNljI.gif","105.gif":"AbNtUS.gif","106.gif":"AbNGHf.gif","107.gif":"AbNYE8.gif",
                // "108.gif":"AbNaCQ.gif","109.gif":"AbNN4g.gif","110.gif":"AbN0vn.gif","111.gif":"AbNd3j.gif",
                // "112.gif":"AbNsbV.gif","113.gif":"AbNwgs.gif","114.gif":"AbNrD0.gif","115.gif":"AbNDuq.gif",
                // "116.gif":"AbNg5F.gif","117.gif":"AbN6ET.gif","118.gif":"AbNcUU.gif","119.gif":"AbNRC4.gif","120.gif":"AbNhvR.gif",
                // "121.gif":"AbNf29.gif","122.gif":"AbNW8J.gif","123.gif":"AbNob6.gif","124.gif":"AbN5K1.gif","125.gif":"AbNHUO.gif","126.gif":"AbNIDx.gif",
                // "127.gif":"AbN7VK.gif","128.gif":"AbNb5D.gif","129.gif":"AbNX2d.gif","130.gif":"AbNLPe.gif",
                // "131.gif":"AbNjxA.gif","132.gif":"AbNO8H.gif","133.gif":"AbNxKI.gif","134.gif":"AbNzrt.gif",
                // "135.gif":"AbU9Vf.gif","136.gif":"AbUSqP.gif","137.gif":"AbUCa8.gif","138.gif":"AbUkGQ.gif",
                // "139.gif":"AbUFPg.gif","140.gif":"AbUPIS.gif","141.gif":"AbUZMn.gif","142.gif":"AbUExs.gif",
                // "143.gif":"AbUA2j.gif","144.gif":"AbUMIU.gif","145.gif":"AbUerq.gif","146.gif":"AbUKaT.gif",
                // "147.gif":"AbUmq0.gif","148.gif":"AbUuZV.gif","149.gif":"AbUliF.gif","150.gif":"AbU1G4.gif",
                // "151.gif":"AbU8z9.gif","152.gif":"AbU3RJ.gif","153.gif":"AbUYs1.gif","154.gif":"AbUJMR.gif",
                // "155.gif":"AbUadK.gif","156.gif":"AbUtqx.gif","157.gif":"AbUUZ6.gif","158.gif":"AbUBJe.gif",
                // "159.gif":"AbUdIO.gif","160.gif":"AbU0iD.gif","161.gif":"AbUrzd.gif","162.gif":"AbUDRH.gif",
                // "163.gif":"AbUyQA.gif","164.gif":"AbUWo8.gif","165.gif":"AbU6sI.gif","166.gif":"AbU2eP.gif",
                // "167.gif":"AbUcLt.gif","168.gif":"AbU4Jg.gif","169.gif":"AbURdf.gif","170.gif":"AbUhFS.gif",
                // "171.gif":"AbU5WQ.gif","172.gif":"AbULwV.gif","173.gif":"AbUIzj.gif","174.gif":"AbUTQs.gif",
                // "175.gif":"AbU7yn.gif","176.gif":"AbUqe0.gif","177.gif":"AbUHLq.gif","178.gif":"AbUOoT.gif",
                // "179.gif":"AbUvYF.gif","180.gif":"AbUjFU.gif","181.gif":"AbaSSJ.gif","182.gif":"AbUxW4.gif",
                // "183.gif":"AbaCO1.gif","184.gif":"Abapl9.gif","185.gif":"Aba9yR.gif","186.gif":"AbaFw6.gif",
                // "187.gif":"Abaiex.gif","188.gif":"AbakTK.gif","189.gif":"AbaZfe.png","190.gif":"AbaEFO.gif",
                // "191.gif":"AbaVYD.gif","192.gif":"AbamSH.gif","193.gif":"AbaKOI.gif","194.gif":"Abanld.gif",
                // "195.gif":"Abau6A.gif","196.gif":"AbaQmt.gif","197.gif":"Abal0P.gif","198.gif":"AbatpQ.gif",
                // "199.gif":"Aba1Tf.gif","200.png":"Aba8k8.png","201.png":"AbaGtS.png","202.png":"AbaJfg.png",
                // "203.png":"AbaNlj.png","204.png":"Abawmq.png","205.png":"AbaU6s.png","206.png":"AbaaXn.png",
                // "207.png":"Aba000.png","208.png":"AbarkT.png","209.png":"AbastU.png","210.png":"AbaB7V.png",
                // "211.png":"Abafn1.png","212.png":"Abacp4.png","213.png":"AbayhF.png","214.png":"Abag1J.png","215.png":"Aba2c9.png","216.png":"AbaRXR.png",
                // "217.png":"Aba476.png","218.png":"Abah0x.png","219.png":"Abdg58.png"},
                //红包相关参数
                windowsState: '',
                redenvelopeData: {
                    rid: null,	//红包ID
                    from: null,
                    face: null,
                    blessing: null,
                    money: null
                },
                chattype: "user",
                chat_to_puid: 0,///当前对聊的人
                user_other_row: {},
                chattitle: "",

                chatlog: [],////我们从缓存读取

                page: 1,
                ispage: false,
                flag: false
            };
        },
        computed: {
            ...mapState(['Config', 'hasLogin', 'userInfo', 'plantformInfo', 'getMsg'])
        },
        watch: {
            getMsg: function (val) {
                let that = this;
                let cacheid = 0;
                console.log('获取到数据')
                console.log(val)

                var nowDate = new Date();
                let lastid = val.message_id;
                let tempmy = this.userInfo.im;


                let msg_type = val.msg_type

                let msg = {
                    type: 'user',
                    sendmethod: this.chattype,
                    needload: false,
                    fromid: this.chat_to_puid,
                    toid: tempmy.puid,
                    msg: {
                        id: lastid,
                        type: msg_type,
                        userinfo: {uid: this.chat_to_puid, username: this.user_other_row.user_nickname, face: this.user_other_row.user_avatar},
                        content: {text:val.content}
                    }
                }


				// 用户消息
				switch (msg_type)
				{
				    case 'text':
				        msg.msg.content.text = val.content;
				        break;
				    case 'voice':
				        msg.msg.content.url = val.content;
				        break;
				    case 'img':
				        msg.msg.content.url = val.content;
				        break;
				    case 'redEnvelope':
				         msg.msg.content.blessing = val.content;
				        break;
                    case 'rtc':
                        msg.msg.content.text = val.content;
                        break;
				}

                if (that.chattype == 'user' && val.type == 'friend')
                {
                    if (that.chat_to_puid == val.id)
                    {
                        console.log('screenMsg')
                        console.log(msg)
                        that.screenMsg(msg);

                        //发起视频聊天
                        if (msg_type == 'rtc')
                        {
                            // #ifdef MP-WEIXIN
                            this.$.gotopage('/rtc/room/1v1wx?to_user_id=' + that.options.uid)
                            // #endif

                            // #ifdef APP-PLUS
                            this.$.gotopage('/rtc/room/1v1?to_user_id=' + that.options.uid)
                            // #endif
                        }
                    }
                    cacheid = msg.fromid;
                }
                else if (that.chattype == 'group' && val.type == 'group')
                {
                    if (that.chat_to_puid == val.toid)
                    {
                        that.screenMsg(msg);
                    }
                    cacheid = msg.toid;
                    ///群聊

                }
                else
                {
                    ///不让在当前页面显示内容
                }

                if (that.chat_to_puid == val.id)
                {
                    apirequest.setMsgRead(lastid, ()=>{

                    })
                    //设为已读
                }

                this.$apiconfig.cacheMessage(val, val.sendmethod, cacheid, tempmy);

                //新消息数归零
                this.$store.commit('resetWeidu', {type: this.chattype, val: this.chat_to_puid})

            }

        },
        onUnload()
        {
            let that = this;
            this.$store.commit('resetWeidu', {type: this.chattype, val: this.chat_to_puid})
            this.$store.commit('setCurrentPuid', '')

            if (!(that.plantformInfo.chat_global))
            {
                that.$Socket.nclose();
            }
        },
        onHide()
        {
            console.log('onHide')
        },
        onLoad(options)
        {
            let that = this;

            that.voiceTis = this.__('按住 说话');
            that.recordTis = this.__('手指上滑 取消发送');

            if (typeof options.uid == 'undefined')
            {
                that.$.navigateBack(1)
            }

            this.forceUserInfo(function (user) {
                if (that.userInfo.im)
                {
                    that.getPlantformInfo(function (plantformInfo) {
                        if (!(that.plantformInfo.chat_global))
                        {
                            that.$Socket.connectserver(that.userInfo.im);
                        }
                    });
                }
            });

			this.setData({
				options: options
			})

            if (options.name)
            {
                this.chattitle = options.name
                uni.setNavigationBarTitle({
                    title:options.name
                });
            }

            let params = {user_other_id:options.uid, is_group:options.type == 1 ? 1 : 0}
            this.$.request({
                url: this.Config.URL.user.msg_config,
                data: params,
                success: (data, status, msg, code)=> {
                    console.info(data);
                    if (status == 200)
                    {
                        if (!options.name)
                        {
                            this.chattitle = data.user_other_info.user_nickname
                            uni.setNavigationBarTitle({
                                title:data.user_other_info.user_nickname
                            });
                        }


                        this.chat_to_puid = data.user_other_info.puid;
                        this.user_other_row = data.user_other_info;

                        this.chattype = options.type == 1 ? 'group' : 'user';
                        this.chattitle = options.title;
                        this.getMsgList();
                        ///将未读条数归零
                        this.$store.commit('updateChaterAttr', {
                            type: this.chattype,
                            val: this.chat_to_puid,
                            attr: 'weidu',
                            data: 0,
                            addinfo: {weidu:0, lastmsg:'', id:this.chat_to_puid, avatar:this.user_other_row.user_avatar, user_id:this.user_other_row.user_id, username:this.user_other_row.user_nickname, logtype:this.chattype}
                        })

                        this.$store.commit('resetWeidu', {type: this.chattype, val: this.chat_to_puid})
                        this.$store.commit('setCurrentPuid', this.chat_to_puid)

                        //设置用户消息全部为已读
                        //领取操作
                        let tmp_params = {user_other_id:this.user_other_row.user_id}
                        this.$.request({
							method: "POST",
                            url: this.Config.URL.user.msg_set_read,
                            data: tmp_params,
                            loading:false,
                            success: function(tmp_data, tmp_status, tmp_msg, tmp_code) {
                                if (tmp_status == 200) {
                                }
                            }
                        })

                        //语音自然播放结束
                        this.AUDIO.onEnded((res) => {
                            this.playMsgid = null;
                        });
                        // #ifndef H5
                        //录音开始事件
                        this.RECORDER.onStart((e) => {
                            this.recordBegin(e);
                        })
                        //录音结束事件
                        this.RECORDER.onStop((e) => {
                            this.recordEnd(e);
                        })


                        // #endif

                        // this.emojiList=[
                        // 	[{"url":"100.gif",alt:"[微笑]"},{"url":"101.gif",alt:"[伤心]"},{"url":"102.gif",alt:"[美女]"},{"url":"103.gif",alt:"[发呆]"},{"url":"104.gif",alt:"[墨镜]"},{"url":"105.gif",alt:"[哭]"},{"url":"106.gif",alt:"[羞]"},{"url":"107.gif",alt:"[哑]"},{"url":"108.gif",alt:"[睡]"},{"url":"109.gif",alt:"[哭]"},{"url":"110.gif",alt:"[囧]"},{"url":"111.gif",alt:"[怒]"},{"url":"112.gif",alt:"[调皮]"},{"url":"113.gif",alt:"[笑]"},{"url":"114.gif",alt:"[惊讶]"},{"url":"115.gif",alt:"[难过]"},{"url":"116.gif",alt:"[酷]"},{"url":"117.gif",alt:"[汗]"},{"url":"118.gif",alt:"[抓狂]"},{"url":"119.gif",alt:"[吐]"},{"url":"120.gif",alt:"[笑]"},{"url":"121.gif",alt:"[快乐]"},{"url":"122.gif",alt:"[奇]"},{"url":"123.gif",alt:"[傲]"}],
                        // 	[{"url":"124.gif",alt:"[饿]"},{"url":"125.gif",alt:"[累]"},{"url":"126.gif",alt:"[吓]"},{"url":"127.gif",alt:"[汗]"},{"url":"128.gif",alt:"[高兴]"},{"url":"129.gif",alt:"[闲]"},{"url":"130.gif",alt:"[努力]"},{"url":"131.gif",alt:"[骂]"},{"url":"132.gif",alt:"[疑问]"},{"url":"133.gif",alt:"[秘密]"},{"url":"134.gif",alt:"[乱]"},{"url":"135.gif",alt:"[疯]"},{"url":"136.gif",alt:"[哀]"},{"url":"137.gif",alt:"[鬼]"},{"url":"138.gif",alt:"[打击]"},{"url":"139.gif",alt:"[bye]"},{"url":"140.gif",alt:"[汗]"},{"url":"141.gif",alt:"[抠]"},{"url":"142.gif",alt:"[鼓掌]"},{"url":"143.gif",alt:"[糟糕]"},{"url":"144.gif",alt:"[恶搞]"},{"url":"145.gif",alt:"[什么]"},{"url":"146.gif",alt:"[什么]"},{"url":"147.gif",alt:"[累]"}],
                        // 	[{"url":"148.gif",alt:"[看]"},{"url":"149.gif",alt:"[难过]"},{"url":"150.gif",alt:"[难过]"},{"url":"151.gif",alt:"[坏]"},{"url":"152.gif",alt:"[亲]"},{"url":"153.gif",alt:"[吓]"},{"url":"154.gif",alt:"[可怜]"},{"url":"155.gif",alt:"[刀]"},{"url":"156.gif",alt:"[水果]"},{"url":"157.gif",alt:"[酒]"},{"url":"158.gif",alt:"[篮球]"},{"url":"159.gif",alt:"[乒乓]"},{"url":"160.gif",alt:"[咖啡]"},{"url":"161.gif",alt:"[美食]"},{"url":"162.gif",alt:"[动物]"},{"url":"163.gif",alt:"[鲜花]"},{"url":"164.gif",alt:"[枯]"},{"url":"165.gif",alt:"[唇]"},{"url":"166.gif",alt:"[爱]"},{"url":"167.gif",alt:"[分手]"},{"url":"168.gif",alt:"[生日]"},{"url":"169.gif",alt:"[电]"},{"url":"170.gif",alt:"[炸弹]"},{"url":"171.gif",alt:"[刀子]"}],
                        // 	[{"url":"172.gif",alt:"[足球]"},{"url":"173.gif",alt:"[瓢虫]"},{"url":"174.gif",alt:"[翔]"},{"url":"175.gif",alt:"[月亮]"},{"url":"176.gif",alt:"[太阳]"},{"url":"177.gif",alt:"[礼物]"},{"url":"178.gif",alt:"[抱抱]"},{"url":"179.gif",alt:"[拇指]"},{"url":"180.gif",alt:"[贬低]"},{"url":"181.gif",alt:"[握手]"},{"url":"182.gif",alt:"[剪刀手]"},{"url":"183.gif",alt:"[抱拳]"},{"url":"184.gif",alt:"[勾引]"},{"url":"185.gif",alt:"[拳头]"},{"url":"186.gif",alt:"[小拇指]"},{"url":"187.gif",alt:"[拇指八]"},{"url":"188.gif",alt:"[食指]"},{"url":"189.gif",alt:"[ok]"},{"url":"190.gif",alt:"[情侣]"},{"url":"191.gif",alt:"[爱心]"},{"url":"192.gif",alt:"[蹦哒]"},{"url":"193.gif",alt:"[颤抖]"},{"url":"194.gif",alt:"[怄气]"},{"url":"195.gif",alt:"[跳舞]"}],
                        // 	[{"url":"196.gif",alt:"[发呆]"},{"url":"197.gif",alt:"[背着]"},{"url":"198.gif",alt:"[伸手]"},{"url":"199.gif",alt:"[耍帅]"},{"url":"200.png",alt:"[微笑]"},{"url":"201.png",alt:"[生病]"},{"url":"202.png",alt:"[哭泣]"},{"url":"203.png",alt:"[吐舌]"},{"url":"204.png",alt:"[迷糊]"},{"url":"205.png",alt:"[瞪眼]"},{"url":"206.png",alt:"[恐怖]"},{"url":"207.png",alt:"[忧愁]"},{"url":"208.png",alt:"[眨眉]"},{"url":"209.png",alt:"[闭眼]"},{"url":"210.png",alt:"[鄙视]"},{"url":"211.png",alt:"[阴暗]"},{"url":"212.png",alt:"[小鬼]"},{"url":"213.png",alt:"[礼物]"},{"url":"214.png",alt:"[拜佛]"},{"url":"215.png",alt:"[力量]"},{"url":"216.png",alt:"[金钱]"},{"url":"217.png",alt:"[蛋糕]"},{"url":"218.png",alt:"[彩带]"},{"url":"219.png",alt:"[礼物]"},]
                        // ]
                        let that = this;

                        this.emojiList = emojiData.imgArr[1].emojiList;

                        /*that.$Socket.listenlist[this.chattype+this.chat_to_puid]=true;
                       if(that.$Socket.listenlist[this.chattype+this.chat_to_puid]){
                           ///如果已被监听
                       }else{
                           that.$Socket.sockettast.onMessage(function(res){
                                        console.log("页面捕获了socket数据"+res.data)
                                         let temdata= eval("("+res.data+")");

                                          switch(temdata.type){
                                               case 'getmessage':
                                                  let msg =temdata.message;
                                                //{type:"user",msg:{id:1,type:"text",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/face.jpg"},content:{text:"为什么温度会相差那么大？"}}};
                                                   that.screenMsg(msg);
                                                   //that.cacheMessage(msg);
                                         break;
                                }
                            })
                       }*/

						//读取商品信息，直接发送出去
						if (options.item_id)
						{
							var params = {
								item_id: options.item_id,
							};

							that.$.request({
								url: this.Config.URL.product.item,
								data: params,
								loading: false,
								ajaxCache: {
									timeout: this.Config.CACHE_EXPIRE
								},

								success: function(data, status, msg, code) {
									if (200 == status) {
										data.item_row.item_unit_price
										data.item_row.product_item_name
										data.item_row.product_image
										data.item_row.item_id

										let imgstr = '<img class="chatimg" src="' + data.item_row.product_image + '">';
										let content = '<div class="chat-bubble-box">'
										    + imgstr + ' <a href="/pagesub/product/detail?id=' + data.item_row.item_id + '">' + data.item_row.product_item_name + that.__('￥') + data.item_row.item_unit_price  + '</a></div>';

										//content = content.replace(new RegExp( '<img ', "gm"), '<img style="max-width:100%;height:auto;display: flex;" ');

										let msg = {text: content, item_id:data.item_row.item_id}
										//that.sendMsg(msg, 'item');
										that.sendMsg(msg, 'text');
									}
								},
								complete: function (res, status) {
								}
							});
						}


						//读取订单信息，直接发送出去
						if (options.text)
						{
							let msg = {text: options.text}
							that.sendMsg(msg, 'text');
						}
                    }
                    else
                    {
                        uni.navigateBack({})
                    }
                }
            })



        },


        onShow()
        {
            this.scrollTop = 9999999;
            let that = this;
            this.myuid = this.userInfo.im.puid;

            //this.getLeavemsg()

            //模板借由本地缓存实现发红包效果，实际应用中请不要使用此方法。
            //
            /*uni.getStorage({
                key: 'redEnvelopeData',
                success:  (res)=>{
                    // console.log(res.data);
                    let nowDate = new Date();
                    let lastid = this.msgList[this.msgList.length-1].msg.id;
                    lastid++;
                    let row = {type:"user",msg:{id:lastid,type:"redEnvelope",time:nowDate.getHours()+":"+nowDate.getMinutes(),userinfo:{uid:0,username:"大黑哥",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/face.jpg"},content:{blessing:res.data.blessing,rid:Math.floor(Math.random()*1000+1),isReceived:false}}};
                    this.screenMsg(row);
                    uni.removeStorage({key: 'redEnvelopeData'});
                }
            });*/

        },

        methods: {
            ...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
            // moveend(e){
            //    console.log(e.detail)
            //    if(e.detail.current===4){
            // 		this.dotsCurrent=Object.assign(this.dotsCurrent,1)
            // 	}
            // },
            // 接受消息(筛选处理)

            screenMsg(msg)
            {
                console.info('screenMsg')
                console.info(msg)
                //从长连接处转发给这个方法，进行筛选处理

                if (msg.type == 'system')
                {
                    // 系统消息
                    switch (msg.msg.type)
                    {
                        case 'text':
                            this.addSystemTextMsg(msg);
                            break;
                        case 'redEnvelope':
                            this.addSystemRedEnvelopeMsg(msg);
                            break;
                    }
                }
                else if (msg.type == 'user' || msg.type == "friend")
                {

                    // 用户消息
                    switch (msg.msg.type)
                    {
                        case 'text':
                            this.addTextMsg(msg);
                            break;
                        case 'voice':
                            this.addVoiceMsg(msg);
                            break;
                        case 'img':
                            this.addImgMsg(msg);
                            break;
                        case 'redEnvelope':
                            this.addRedEnvelopeMsg(msg);
                            break;
                    }
                    // console.log('用户消息');
                    //非自己的消息震动
                    if (msg.msg.userinfo.uid != this.myuid)
                    {
                        // console.log('振动');
                        uni.vibrateLong();
                    }
                }
                this.$nextTick(function () {
                    // 滚动到底
                    this.scrollToView = 'msg' + msg.msg.id
                });
            },

            //触发滑动到顶部(加载历史信息记录)
            loadHistory(e)
            {
                if (this.isHistoryLoading)
                {
                    return;
                }


                this.isHistoryLoading = true;//参数作为进入请求标识，防止重复请求
                this.scrollAnimation = false;//关闭滑动动画
                let Viewid = this.msgList[0].msg.id;//记住第一个信息ID



                var that = this;
                if (this.flag && this.ispage)
                {
                    that.setData({flag: false}), clearTimeout(t);
                    var t = setTimeout(() => {
                        that.setData({page: parseInt(that.page) + 1});
                        that.getMsgList(()=>{

                            //这段代码很重要，不然每次加载历史数据都会跳到顶部
                            this.$nextTick(function () {
                                this.scrollToView = 'msg' + Viewid;//跳转上次的第一行信息位置
                                console.info('this.scrollToView ')
                                console.info(this.scrollToView )
                                this.$nextTick(function () {
                                    this.scrollAnimation = true;//恢复滚动动画
                                });

                            });

                            this.isHistoryLoading = false;
                        });
                    }, 500)
                }
                else
                {
                    this.isHistoryLoading = false;
                }

                return;


                //本地模拟请求历史记录效果
                this.$apiconfig.getMessagelog_f({data: {mid: this.myuid, toid: this.chat_to_puid}}).then(res => {
                    console.log(res);
                });
                setTimeout(() => {
                    // 消息列表
                    /*this.$apiconfig.getMessagelog_f({data:[]}).then(res=>{

                    });*/
                    /*let list = [
                        {type:"user",msg:{id:1,type:"text",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/face.jpg"},content:{text:"为什么温度会相差那么大？"}}},
                        {type:"user",msg:{id:2,type:"text",time:"12:57",userinfo:{uid:1,username:"售后客服008",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{text:"这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。"}}},
                        {type:"user",msg:{id:3,type:"voice",time:"12:59",userinfo:{uid:1,username:"售后客服008",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{url:"/static/voice/1.mp3",length:"00:06"}}},
                        {type:"user",msg:{id:4,type:"voice",time:"13:05",userinfo:{uid:0,username:"大黑哥",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/face.jpg"},content:{url:"/static/voice/2.mp3",length:"00:06"}}},
                    ]*/
                    let list = [];
                    if (list.length > 0)
                    {
                        // 获取消息中的图片,并处理显示尺寸
                        for (let i = 0; i < list.length; i++)
                        {
                            if (list[i].type == 'user' && list[i].msg.type == "img")
                            {
                                list[i].msg.content = this.setPicSize(list[i].msg.content);
                                this.msgImgList.unshift(list[i].msg.content.url);
                            }
                            list[i].msg.id = Math.floor(Math.random() * 1000 + 1);
                            this.msgList.unshift(list[i]);
                        }

                        //这段代码很重要，不然每次加载历史数据都会跳到顶部
                        this.$nextTick(function () {
                            this.scrollToView = 'msg' + Viewid;//跳转上次的第一行信息位置
                            this.$nextTick(function () {
                                this.scrollAnimation = true;//恢复滚动动画
                            });

                        });
                    }

                    this.isHistoryLoading = false;

                }, 1000)
            },
            ///获取留言(如果是好友就从退出时间往前十条十条的加载，群得话只加载最近十条)
            getLeavemsg()
            {
                let tempmy = this.userInfo.im;
                this.$apiconfig.getrecentmsg_f({
                    data: {
                        mid: tempmy.user_id,
                        tid: this.chat_to_puid,
                        type: this.chattype
                    }
                }).then(res => {
                    console.log(res.data);
                })
            },

            // 加载初始页面消息
            getMsgList(callback)
            {

                let that = this;
                // 消息列表
                //最好读取和某个人的聊天缓存，所以信息我们都存缓存
                let list = [];
                /*  uni.getStorage({
                      key:'chatim',
                    complete(res) {
                        let tempmy=that.userInfo.data.mine;
                       if(res.data==''||typeof(res.data)=='undefined'){
                        }else{
                          if(typeof(res.data[tempmy.puid])=='undefined'||typeof(res.data[tempmy.puid]['chatlog'])=='undefined'){
                                console.log(1)
                            }else{

                                if(that.chattype=='group'){
                                    if(typeof(res.data[tempmy.puid]['chatlog']['group'+that.chat_to_puid])=='undefined'){

                                    }else{
                                       list= res.data[tempmy.puid]['chatlog']['group'+that.chat_to_puid]
                                    }
                                }else{
                                    console.log(2)
                                    if(typeof(res.data[tempmy.puid]['chatlog']['friend'+that.chat_to_puid])=='undefined'){

                                    }else{
                                        list= res.data[tempmy.puid]['chatlog']['friend'+that.chat_to_puid]


                                    }
                                }

                            }

                        }
                    }
                  })*/

                /* let list = [
                   {type:"system",msg:{id:0,type:"text",content:{text:"欢迎进入聊天室"}}},
                   {type:"user",msg:{id:1,type:"text",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/face.jpg"},content:{text:"为什么温度会相差那么大？"}}},
                   {type:"user",msg:{id:2,type:"text",time:"12:57",userinfo:{uid:1,username:"售后客服008",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{text:"这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。"}}},
                   {type:"user",msg:{id:3,type:"voice",time:"12:59",userinfo:{uid:1,username:"售后客服008",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{url:"/static/voice/1.mp3",length:"00:06"}}},
                   {type:"user",msg:{id:4,type:"voice",time:"13:05",userinfo:{uid:0,username:"大黑哥",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/face.jpg"},content:{url:"/static/voice/2.mp3",length:"00:06"}}},
                   {type:"user",msg:{id:5,type:"img",time:"13:05",userinfo:{uid:0,username:"大黑哥",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/face.jpg"},content:{url:"https://static.shopsuite.cn/xcxfile/appicon/im/img/p10.jpg",w:200,h:200}}},
                   {type:"user",msg:{id:6,type:"img",time:"12:59",userinfo:{uid:1,username:"售后客服008",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{url:"https://static.shopsuite.cn/xcxfile/appicon/im/img/q.jpg",w:1920,h:1080}}},
                   {type:"system",msg:{id:7,type:"text",content:{text:"欢迎进入聊天室"}}},

                   {type:"system",msg:{id:9,type:"redEnvelope",content:{text:"售后客服008领取了你的红包"}}},
                   {type:"user",msg:{id:10,type:"redEnvelope",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/face.jpg"},content:{blessing:"恭喜发财，大吉大利，万事如意",rid:0,isReceived:false}}},
                   {type:"user",msg:{id:11,type:"redEnvelope",time:"12:56",userinfo:{uid:1,username:"售后客服008",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{blessing:"恭喜发财",rid:1,isReceived:false}}},
               ]*/
                let tempmy = this.userInfo.im;
                console.info('tempmy')
                console.info(tempmy)

                var params = {
                    user_other_id: this.user_other_row.user_id,
                    data: {mid: tempmy.puid, tid: this.chat_to_puid, type: this.chattype},
                    page: this.page
                }
                this.$apiconfig.getrecentmsg_f(params, (data, status, msg, code) => {
                    console.info('getrecentmsg_f')
                    console.info(JSON.stringify(data))
                    console.info(status)
                    console.info(msg)
                    if (data.items.length > 0)
                    {
                        let array = [];
                        list = data.items.forEach(item => {
                            array.unshift(item);
                        });




                        list = array;

                        // 获取消息中的图片,并处理显示尺寸
                        if (list.length > 0)
                        {
                            for (let i = 0; i < list.length; i++)
                            {
                                if (list[i].type == 'user' && list[i].msg.type == "img")
                                {
                                    list[i].msg.content = this.setPicSize(list[i].msg.content);
                                    this.msgImgList.push(list[i].msg.content.url);
                                }


                                list[i].msg = this.$apiconfig.im_decode_msg(list[i].msg);
                            }
                        }

                        this.msgList = list.concat(this.msgList);

                        if (data.page >= data.total)
                        {
                            that.setData({
                                flag: false,
                                ispage: false
                            });
                        }
                        else
                        {
                            that.setData({
                                flag: true,
                                ispage: true
                            })
                        }

                    }
                    else
                    {
                        that.setData({flag: false, ispage: false})
                    }

                    console.info(data)
                    console.info(this.msgList);

                    if (callback)
                    {
                        callback()
                    }
                    else
                    {
                        // 滚动到底部
                        this.$nextTick(function () {
                            //进入页面滚动到底部
                            this.scrollTop = 9999;
                            this.$nextTick(function () {
                                this.scrollAnimation = true;
                            });

                        });
                    }
                })

            },
            //处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
            setPicSize(content)
            {
                // 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
                let maxW = uni.rpx2px(350);//350是定义消息图片最大宽度
                let maxH = uni.rpx2px(350);//350是定义消息图片最大高度
                if (content.w > maxW || content.h > maxH)
                {
                    let scale = content.w / content.h;
                    content.w = scale > 1 ? maxW : maxH * scale;
                    content.h = scale > 1 ? maxW / scale : maxH;
                }
                return content;
            },

            //更多功能(点击+弹出)
            showMore()
            {
                this.isVoice = false;
                this.hideEmoji = true;
                if (this.hideMore)
                {
                    this.hideMore = false;
                    this.openDrawer();
                }
                else
                {
                    this.hideDrawer();
                }
            },
            // 打开抽屉
            openDrawer()
            {
                this.popupLayerClass = 'showLayer';
            },
            // 隐藏抽屉
            hideDrawer()
            {
                this.popupLayerClass = '';
                setTimeout(() => {
                    this.hideMore = true;
                    this.hideEmoji = true;
                }, 150);
            },
            // 选择图片发送
            chooseImage()
            {
                this.getImage('album');
            },
            //拍照发送
            camera()
            {
                this.getImage('camera');
            },
            //发红包
            handRedEnvelopes()
            {
                uni.navigateTo({
                    url: 'HM-hand/HM-hand'
                });
                this.hideDrawer();
            },

			//语音通话
			yuyintonghua()
			{
				//发送语音通知消息
				let msg = {text: this.__('发起语音通话')};
				this.sendMsg(msg, 'rtc');

                // #ifdef MP-WEIXIN
                this.$.gotopage('/rtc/room/1v1wx?to_user_id=' + this.options.uid)
                // #endif

                // #ifdef APP-PLUS
                this.$.gotopage('/rtc/room/1v1?to_user_id=' + this.options.uid)
                // #endif
			},

            //选照片 or 拍照
            getImage(type)
            {
                let that = this;
                this.hideDrawer();
                that.$.chooseImage({
                    sourceType: [type],
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    success: (res) => {
                        for (let i = 0; i < res.tempFilePaths.length; i++)
                        {
                            uni.getImageInfo({
                                src: res.tempFilePaths[i],
                                success: (image) => {

                                    let msg = {url: res.tempFilePaths[i], w: image.width, h: image.height};

                                    that.$.uploadFile({
                                        url: that.Config.URL.upload, //仅为示例，非真实的接口地址
                                        filePath: res.tempFilePaths[i],
                                        name: 'upfile',
                                        formData: {
                                            'user': 'test'
                                        },
                                        success: (uploadFileRes) => {
                                            let tmpres = JSON.parse(uploadFileRes.data);
                                            ///图片上传到服务器，上传完成后发送信息


                                            if (tmpres.status == 200)
                                            {
                                                msg.url = tmpres.data.file_url;

                                                this.sendMsg(msg, 'img');
                                            }
                                            else
                                            {
                                                that.$.confirm(tmpres.msg || that.__('发生错误'));
                                            }
                                        }
                                    });

                                }
                            });
                        }
                    }
                });
            },
            // 选择表情
            chooseEmoji()
            {
                this.hideMore = true;
                if (this.hideEmoji)
                {
                    this.hideEmoji = false;
                    this.openDrawer();
                }
                else
                {
                    this.hideDrawer();
                }
            },
            //添加表情
            addEmoji(em)
            {

                //判断删除按钮
                if (em.emojiItem.alt === '[删除]')
                {
                    //  uni.showToast({
                    //  	title:"触发删除操作",
                    // icon:"none"
                    //  })
                    var str;
                    var msglen = this.textMsg.length - 1;
                    let start = this.textMsg.lastIndexOf("[");
                    let end = this.textMsg.lastIndexOf("]");
                    let len = end - start;
                    if (end != -1 && end === msglen && len >= 2 && len <= 4)
                    {
                        // 表情字符
                        str = this.textMsg.slice(0, start);
                    }
                    else
                    {
                        // 普通键盘输入汉字 或者字符
                        str = this.textMsg.slice(0, msglen);
                    }

                    this.textMsg = str

                    return;
                }
                // console.log(em)
                this.emojiList = emojiData.imgArr[em.groupIndex].emojiList
                this.emojiPath = emojiData.imgArr[em.groupIndex].emojiPath
                if (em.minEmoji === false)
                {
                    this.sendBigEmoji(em.emojiItem.url)
                }
                else
                {
                    // this.textMsg+=em.alt;
                    this.textMsg += em.emojiItem.alt;
                }
            },
            // 发送大表情
            sendBigEmoji(url)
            {
                this.hideDrawer();//隐藏抽屉
                if (!url)
                {
                    return;
                }
                let imgstr = '<img style="width:48px;height:48px;" src="' + this.emojiPath + url + '">';
                let content = '<div style="align-items: center;word-wrap:break-word;">'
                    + imgstr
                    + '</div>';
                let msg = {text: content}
                this.sendMsg(msg, 'text');
                this.textMsg = '';//清空输入框
            },
            //获取焦点，如果不是选表情ing,则关闭抽屉
            textareaFocus()
            {
                if (this.popupLayerClass == 'showLayer' && this.hideMore == false)
                {
                    this.hideDrawer();
                }
            },
            // 发送文字消息
            sendText()
            {
                /*uni.showToast({
                    title:'发送文本消息',
                    icon:"none"
                })*/
                this.hideDrawer();//隐藏抽屉
                if (!this.textMsg)
                {
                    return;
                }

                let content = this.replaceEmoji(this.textMsg);
                let msg = {text: content}
                this.sendMsg(msg, 'text');
                this.textMsg = '';//清空输入框
            },
            //替换表情符号为图片
            replaceEmoji(str)
            {
                // 正则表达式匹配内容
                let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
                    // console.log("item: " + item);
                    for (let i = 0; i < this.emojiList.length; i++)
                    {
                        let row = this.emojiList[i];
                        for (let j = 0; j < row.length; j++)
                        {
                            let EM = row[j];
                            if (EM.alt == item)
                            {
                                //在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
                                //比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
                                // let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
                                // let imgstr = '<image src="'+onlinePath+this.onlineEmoji[EM.url]+'">';

                                let onlinePath = this.emojiPath
                                let imgstr = '<img style="width:24px;height:24px;" src="' + onlinePath + EM.url + '">';
                                // console.log("imgstr: " + imgstr);
                                return imgstr;
                            }
                        }
                    }
                });
                return '<div style="align-items: center;word-wrap:break-word;">' + replacedStr + '</div>';
            },
            // 发送消息
            sendMsg(content, type, needload = false)
            {
				console.info('--------------')
				console.info(content)
				console.info(content.text)
				console.info(type)
				console.info(needload)

            	let message_id = 1001;
                var mine = {
                    username: this.userInfo.user_nickname,
                    avatar: this.userInfo.user_avatar,
                    id: this.userInfo.im.puid,
                    user_id: this.userInfo.user_id,
					content: content.text || content.url,
                    length: type=='voice' ? content.length : 0,
                    w: type=='img' ? content.w : 0,
                    h: type=='img' ? content.h : 0,
                    item_id: typeof content.item_id != 'undefined' ? content.item_id: 0,
					type: type,
                    mine: true
                };

				var to = {
					id: this.chat_to_puid,
					friend_id: this.user_other_row.user_id,
					user_id: this.user_other_row.user_id,
					name: this.user_other_row.user_nickname,
					avatar: this.user_other_row.user_avatar,
					type: this.chattype
				};

				let maxLength = 50
                if (mine.content.replace(/\s/g, '') !== '')
                {
                    if (mine.content.length > maxLength)
                    {
                        //return layer.msg('内容最长不能超过' + maxLength + '个字符')
                    }
                }

                var chat_data = {
                    mine: mine, to: to
                }

                let params = {user_other_id:this.user_other_row.user_id, message_content:mine.content, item_id:typeof content.item_id != 'undefined' ? content.item_id: 0,length:mine.length, w:mine.w, h:mine.h, type:type};

                this.$apiconfig.sendMessage_f(params, (data, status, res_msg, code) => {
                    chat_data.mine.message_id = data.message_other_id;
                    //chat_data.to.message_id = data.message_id;

                    this.$Socket.nsend(chat_data);


                    //实际应用中，此处应该提交长连接，模板仅做本地处理。
                    var nowDate = new Date();
                    let lastid = data.message_other_id;
                    let tempmy = this.userInfo.im;
                    ///TOID现在是模拟的
                    let msg = {
                        type: 'user',
                        sendmethod: this.chattype,
                        needload: needload,
                        fromid: tempmy.puid,
                        toid: this.chat_to_puid,
                        msg: {
                            id: lastid,
                            type: type,
                            userinfo: {uid: tempmy.puid, username: this.userInfo.user_nickname, face: this.userInfo.user_avatar},
                            content: content
                        }
                    }
                    // 发送消息
                    if (this.chattype == 'group')
                    {

                    }
                    else
                    {
                        this.screenMsg(msg);///消息显示在自己聊天面板
                        msg.display = true;
                        this.$store.commit('updateChaterAttr', {
                            type: this.chattype,
                            val: this.chat_to_puid,
                            attr: 'lastmsg',
                            data: content,
                            addinfo: {weidu:0, lastmsg:content, id:this.chat_to_puid, avatar:this.user_other_row.user_avatar, user_id:this.user_other_row.user_id, username:this.user_other_row.user_nickname, logtype:this.chattype}
                        })

                        this.$store.commit('resetWeidu', {type: this.chattype, val: this.chat_to_puid})

                        this.$apiconfig.cacheMessage(msg, this.chattype, this.chat_to_puid, tempmy);
                    }
                })

                return ;


                ////聊天记录存入缓存
                //
                this.$apiconfig.sendMessage_f({data: msg}).then(res => {
                    console.log(res);
                })

                // 定时器模拟对方回复,三秒
                /*setTimeout(()=>{
                    lastid = this.msgList[this.msgList.length-1].msg.id;
                    lastid++;
                    msg = {type:'user',msg:{id:lastid,time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,userinfo:{uid:1,username:"售后客服008",face:"https://static.shopsuite.cn/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:content}}

                    // 本地模拟发送消息
                    this.screenMsg(msg);
                },3000)*/
            }
            ,

            // 添加文字消息到列表
            addTextMsg(msg)
            {
                console.info('addTextMsg')
                console.info(msg)
                this.msgList.push(msg);
            }
            ,
            // 添加语音消息到列表
            addVoiceMsg(msg)
            {
                this.msgList.push(msg);
            }
            ,
            // 添加图片消息到列表
            addImgMsg(msg)
            {
                msg.msg.content = this.setPicSize(msg.msg.content);
                this.msgImgList.push(msg.msg.content.url);
                this.msgList.push(msg);
            }
            ,
            addRedEnvelopeMsg(msg)
            {
                this.msgList.push(msg);
            }
            ,
            // 添加系统文字消息到列表
            addSystemTextMsg(msg)
            {
                this.msgList.push(msg);
            }
            ,
            // 添加系统红包消息到列表
            addSystemRedEnvelopeMsg(msg)
            {
                this.msgList.push(msg);
            }
            ,
            // 打开红包
            openRedEnvelope(msg, index)
            {
                let rid = msg.content.rid;
                uni.showLoading({
                    title: '加载中...'
                });
                // console.log("index: " + index);
                //模拟请求服务器效果
                setTimeout(() => {
                    //加载数据
                    if (rid == 0)
                    {
                        this.redenvelopeData = {
                            rid: 0,	//红包ID
                            from: "大黑哥",
                            face: "https://static.shopsuite.cn/xcxfile/appicon/im/img/im/face/face.jpg",
                            blessing: "恭喜发财，大吉大利",
                            money: "已领完"
                        }
                    }
                    else
                    {
                        this.redenvelopeData = {
                            rid: 1,	//红包ID
                            from: "售后客服008",
                            face: "https://static.shopsuite.cn/xcxfile/appicon/im/img/im/face/face_2.jpg",
                            blessing: "恭喜发财",
                            money: "0.01"
                        }
                        if (!msg.content.isReceived)
                        {
                            // {type:"system",msg:{id:8,type:"redEnvelope",content:{text:"你领取了售后客服008的红包"}}},
                            this.sendSystemMsg({text: "你领取了" + (msg.userinfo.uid == this.myuid ? "自己" : msg.userinfo.username) + "的红包"}, 'redEnvelope');
                            // console.log("this.msgList[index]: " + JSON.stringify(this.msgList[index]));
                            this.msgList[index].msg.content.isReceived = true;
                        }
                    }
                    uni.hideLoading();
                    this.windowsState = 'show';

                }, 200)

            }
            ,
            // 关闭红包弹窗
            closeRedEnvelope()
            {
                this.windowsState = 'hide';
                setTimeout(() => {
                    this.windowsState = '';
                }, 200)
            }
            ,
            sendSystemMsg(content, type)
            {
                let lastid = this.msgList[this.msgList.length - 1].msg.id;
                lastid++;
                let row = {type: "system", msg: {id: lastid, type: type, content: content}};
                this.screenMsg(row)
            }
            ,
            //领取详情
            toDetails(rid)
            {
                uni.navigateTo({
                    url: 'HM-details/HM-details?rid=' + rid
                })
            }
            ,
            // 预览图片
            showPic(msg)
            {
                uni.previewImage({
                    indicator: "none",
                    current: msg.content.url,
                    urls: this.msgImgList
                });
            }
            ,
            // 播放语音
            playVoice(msg)
            {
                this.playMsgid = msg.id;
                this.AUDIO.src = msg.content.url;
                this.$nextTick(function () {
                    this.AUDIO.play();
                });
            }
            ,
            // 录音开始
            voiceBegin(e)
            {
                if (e.touches.length > 1)
                {
                    return;
                }
                this.initPoint.Y = e.touches[0].clientY;
                this.initPoint.identifier = e.touches[0].identifier;
                this.RECORDER.start({format: "mp3"});//录音开始,
            }
            ,
            //录音开始UI效果
            recordBegin(e)
            {
                this.recording = true;
                this.voiceTis = this.__('松开 结束');
                this.recordLength = 0;
                this.recordTimer = setInterval(() => {
                    this.recordLength++;
                }, 1000)
            }
            ,
            // 录音被打断
            voiceCancel()
            {
                this.recording = false;
                this.voiceTis = this.__('按住 说话');
                this.recordTis = this.__('手指上滑 取消发送');
                this.willStop = true;//不发送录音
                this.RECORDER.stop();//录音结束
            }
            ,
            // 录音中(判断是否触发上滑取消发送)
            voiceIng(e)
            {
                if (!this.recording)
                {
                    return;
                }
                let touche = e.touches[0];
                //上滑一个导航栏的高度触发上滑取消发送
                if (this.initPoint.Y - touche.clientY >= uni.rpx2px(100))
                {
                    this.willStop = true;
                    this.recordTis = this.__('松开手指 取消发送');
                }
                else
                {
                    this.willStop = false;
                    this.recordTis = this.__('手指上滑 取消发送');
                }
            }
            ,
            // 结束录音
            voiceEnd(e)
            {
                if (!this.recording)
                {
                    return;
                }
                this.recording = false;
                this.voiceTis = this.__('按住 说话');
                this.recordTis = this.__('手指上滑 取消发送');
                this.RECORDER.stop();//录音结束
            }
            ,
            //录音结束(回调文件)
            recordEnd(e)
            {
                clearInterval(this.recordTimer);
                if (!this.willStop)
                {
                    // console.log("e: " + JSON.stringify(e));
                    let tempFilePaths = e.tempFilePath;
                    let that = this;
                    let urlpaht = that.Config.URL.upload_file;
                    this.$.uploadFile({
                        url: urlpaht, //仅为示例，非真实的接口地址
                        filePath: tempFilePaths,
                        header: {
                            'merchcode': that.$apiconfig.merchcode
                        },
                        name: 'upfile',
                        formData: {
                            'user': 'test'
                        },
                        success: (uploadFileRes) => {
                            let tmpres = JSON.parse(uploadFileRes.data);

                            let msg = {
                                length: 0,
                                url: tmpres.data.file_url
                            }

                            let min = parseInt(this.recordLength / 60);
                            let sec = this.recordLength % 60;
                            min = min < 10 ? '0' + min : min;
                            sec = sec < 10 ? '0' + sec : sec;
                            msg.length = min + ':' + sec;
                            ///上传录音到服务器
                            this.sendMsg(msg, 'voice');
                        }
                    });
                }
                else
                {
                    // console.log('取消发送录音');
                }
                this.willStop = false;
            }
            ,
            // 切换语音/文字输入
            switchVoice()
            {
                this.hideDrawer();
                this.isVoice = this.isVoice ? false : true;
            }
            ,
            discard()
            {
                return;
            },
			preview(src, e) {
			  // do something
			},
			navigate(href, e) {
			  // do something
			  console.info(href);
			  console.info(e);

			  this.$.gopage(href);
			}
        }
    }
</script>
<style lang="scss">
    @import "@/static/HM-chat/css/style.scss";
	@import url("@/components/u-parse/u-parse.css");


	.m-product-info1{
		width: 400rpx;
	}

</style>

